<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="listMaterial"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :dict="dict"
      :setupConfig="setupConfig"
      :searchConfig="searchConfig"
      :searchReset="searchReset"
      @edit="edit"
      @del="del"
    >
    <template v-slot:expand="{ row }">
        <el-table :data="getType(row.materialTypeId)" style="width: 100%; padding-left: 50px;">
          <el-table-column prop="materialId" label="类别ID" width="200">
          </el-table-column>
          <el-table-column prop="typeName" label="类别名称" width="200">
          </el-table-column
          >
        </el-table>
      </template>
      <!-- <template v-slot:multiple-operation="{ selectionData }">
          <el-button
            type="success"
            size="small"
            @click="handleClick2(selectionData)"
            >批量操作2</el-button
          >
        </template> -->
      <!-- <template v-slot:searchBtn="{ searchData }">
          <el-button
            size="medium"
            type="primary"
            @click="handleAdd(searchData)"
            >新增</el-button
          >
        </template> -->
      <template v-slot:searchBtn="{}">
        <el-button size="medium" type="primary" @click="handleAdd()"
          >新增</el-button
        >
      </template>
      <template v-slot:setup="{ row }">
        <el-button size="medium" type="text" @click="handleType(row)"
          >查看公司类别</el-button
        >
      </template>
    </render-table>
    <DialogView
      :dialogTitle="openDialog.dialogTitle"
      :visible="openDialog.visible"
      @submitData="submitData"
      @handleClose="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="form"  label-width="120px">
        <el-form-item label="种类名称" prop="materialTypeName">
            <el-input v-model.trim="form.materialTypeName" placeholder="请输入种类名称"></el-input>
        </el-form-item>
      </el-form>
    </DialogView>
    <DialogView
      :dialogTitle="typeDialog.dialogTitle"
      :visible="typeDialog.visible"
      @submitData="handleClose"
      @handleClose="handleClose"
      :popupWidth='"700px"'
    >
      <type-table v-if="typeDialog.visible" :searchReset="searchTypeReset"></type-table>
    </DialogView>
  </div>
</template>
    
    <script>
import {
    listMaterial,
  delMaterial,
  addMaterial,
  updateMaterial,
  listMaterialType
} from "@/api/purchase/api";
import typeTable from './typeTable.vue';

export default {
  components: { typeTable },
  name: "material-type",
  data() {
    return {
      typeDialog: {
        dialogTitle: "公司类别",
        visible: false,
      },
      searchTypeReset:{},
        form:{
            materialTypeName:''
        },
      openDialog: {
        dialogTitle: "新增",
        visible: false,
      },
      searchReset: {
        materialTypeName: "",
      },
      searchConfig: [
        {
          type: "input",
          key: "materialTypeName",
          placeholder: "请输入名称",
        },
      ],
      setupConfig: {
        edit: true,
        del: true,
      },
      dict: {},
      otherConfig: {
        list: "rows",
      },
      listMaterial,
      tableColumn: [
        { prop: "materialTypeId", label: "分类序号" },
        { prop: "materialTypeName", label: "种类名称" },
      ],
      rules: {
        materialTypeName: [
          { required: true, message: "种类名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getType('23071540738826').then((res)=>{
      return res
    })
    
  },
  methods: {
    
   async getType(id){
     const a = await  listMaterialType({typeId:id}).then((res) =>{
        let  data = res.data
        return data
      });
      return a
    },
    handleType(row){
      this.searchTypeReset = {typeId :row.materialTypeId}
      this.typeDialog.visible = true;
    },
    edit(row) {
      this.form = { ...row };
      // delete this.form.createTime;
      this.openDialog.visible = true;
      this.openDialog.dialogTitle = "修改物资种类信息";
    },
    del(row) {
      const materialTypeId = row.materialTypeId || this.ids;
      this.$modal
        .confirm(
          '是否确认删除种类名称为"' + row.materialTypeName + '"的数据项？'
        )
        .then(function () {
          return delMaterial(materialTypeId);
        })
        .then(() => {
          this.$refs.table.getData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // isSelectable(row){
    //   console.log('row',row)
    // },
    handleClose() {
      this.openDialog.visible = false;
      this.typeDialog.visible = false;
      this.form = {};
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.openDialog.visible = true;
      this.openDialog.dialogTitle = "添加物资种类信息";
    },
    /** 提交按钮 */
    submitData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
            const form = {}
            form.name = this.form.materialTypeName
          if (this.form.materialTypeId) {
            form.id = this.form.materialTypeId
            updateMaterial(form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$refs.table.getData();
              this.openDialog.visible = false;
              this.form = {};
            });
          } else {
            addMaterial(form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$refs.table.getData();
              this.openDialog.visible = false;
              this.form = {};
            });
          }
        }
      });
    },
  },
};
</script>
    